import { StyleSheet } from 'react-native';
import { Utils } from 'tuya-panel-kit';

const { convertX: cx, convertY: cy, isIphoneX } = Utils.RatioUtils;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    marginLeft: cx(36),
    marginTop: cx(28),
    justifyContent: 'space-between',
  },
  title: {
    fontSize: cx(48),
    marginBottom: cx(8),
    color: '#fff',
  },
  txt: {
    backgroundColor: 'transparent',
    textAlign: 'center',
    fontSize: 20,
  },
  tipText: {
    fontSize: cx(14),
    color: 'rgba(255,255,255,0.5)',
    lineHeight: cx(30),
  },
  tipsText: {
    fontSize: cx(14),
    color: 'rgba(255,255,255,0.6)',
    lineHeight: cx(30),
  },
  otherTextName: {
    fontSize: cx(14),
    color: 'rgba(255,255,255,0.5)',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  iconOutBox: {
    width: cx(54),
    height: cx(54),
    borderRadius: cx(27),
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  switch: {
    height: cx(54),
    borderRadius: cx(27),
    backgroundColor: '#fff',
    paddingVertical: cx(16),
    paddingRight: cx(28),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: isIphoneX ? cx(110) : cx(87),
    overflow: 'hidden',
  },
  openText: {
    fontSize: cx(14),
    color: 'rgba(17,17,17,0.5)',
  },
  flexContent: {
    flex: 1,
    justifyContent: 'space-between',
    width: cx(280),
  },
  otherMessageContainer: {
    marginTop: cy(4),
    flexDirection: 'row',
    width: cx(160),
    alignItems: 'center',
  },
  textCenter: {
    alignItems: 'center',
  },
  functionBox: {
    width: cx(252),
    height: cx(460),
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  row: {
    flexDirection: 'row',
  },
  setBackground: {
    borderTopLeftRadius: cx(8),
    borderTopRightRadius: cx(8),
    paddingHorizontal: cx(22),
    paddingTop: cx(20),
    paddingBottom: cx(80),
    borderBottomLeftRadius: cx(1),
    borderBottomRightRadius: cx(1),
  },
  textVaule: {
    alignItems: 'center',
    flexDirection: 'row',
    height: cy(20),
  },
  unit: {
    alignSelf: 'flex-start',
    color: 'rgba(255,255,255,0.5)',
  },
  boxTitle: {
    marginBottom: cx(26),
    alignSelf: 'flex-start',
  },
  titleText: {
    fontSize: cx(24),
    fontWeight: '600',
    color: '#fff',
  },
  functionContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingBottom: cy(10),
  },
  contentBox: {
    width: cx(92),
    height: cx(91),
    justifyContent: 'space-between',
    paddingTop: cx(22),
    paddingBottom: cx(16),
    alignItems: 'center',
    borderRadius: cx(12),
    marginBottom: cx(12),
    overflow: 'hidden',
  },
  otherDpBox: {
    width: cx(92),
    height: cx(91),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: cx(12),
    marginBottom: cx(12),
  },
  powerContentBox: {
    width: cx(92),
    height: cx(91),
    justifyContent: 'space-between',
    paddingTop: cx(18),
    paddingBottom: cx(12),
    alignItems: 'center',
    borderRadius: cx(12),
    marginBottom: cx(12),
    overflow: 'hidden',
    backgroundColor: 'rgba(255,255,255,0.2)',
  },
  powerContentText: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: cx(2),
  },
  whiteText: {
    fontSize: cx(14),
    color: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  heatingText: {
    fontSize: cx(11),
  },
  countdownText: {
    height: cx(24),
    flexDirection: 'row',
    alignItems: 'center',
  },
  countdownTextBox: {
    height: cx(28),
    overflow: 'hidden',
    width: '100%',
    alignItems: 'center',
  },
  bottomImage: {
    position: 'absolute',
    height: cx(30),
    alignItems: 'center',
    flexDirection: 'row',
    bottom: cx(20),
    left: cx(130),
    justifyContent: 'space-between',
  },
  smallIcon: {
    width: cx(20),
    height: cx(20),
  },
  bigIcon: {
    width: cx(30),
    height: cx(30),
  },
  dot: {
    width: cx(8),
    height: cx(8),
    borderRadius: cx(4),
    backgroundColor: 'rgba(255,255,255,0.5)',
  },
  usePower: {
    flexDirection: 'row',
    height: cx(90),
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: cx(17),
  },
  powerBox: {
    width: '48%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  powerText: {
    flexDirection: 'row',
    marginBottom: cx(8),
  },
  powerUnit: {
    color: 'rgba(255,255,255,0.4)',
    fontSize: 10,
    alignSelf: 'flex-end',
    marginTop: cx(-2),
  },
  pwerName: {
    color: 'rgba(255,255,255,0.5)',
    fontSize: 12,
  },
  dividerBox: {
    height: cx(90),
    justifyContent: 'center',
  },
  barBox: {
    marginTop: cx(70),
    marginBottom: cx(30),
  },
  actionBox: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: cx(40),
  },
  upDownBox: {
    height: cx(160),
    justifyContent: 'space-between',
  },
  actionCircle: {
    width: cx(60),
    height: cx(60),
    borderRadius: cx(30),
    alignItems: 'center',
    justifyContent: 'center',
  },
  cookingBox: {
    width: cx(195),
    height: cx(195),
    justifyContent: 'center',
    alignItems: 'center',
  },
  cookingGear: {
    width: cx(96),
    height: cx(96),
    borderRadius: cx(12),
    backgroundColor: 'rgba(255,255,255,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  gearText: {
    fontSize: cx(20),
    color: '#fff',
  },
  cookingButton: {
    width: cx(190),
    height: cx(46),
    borderRadius: cx(23),
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cookingText: {
    fontSize: cx(14),
  },
  setTemp: {
    flexDirection: 'row',
    alignItems: 'center',
    width: cx(190),
    justifyContent: 'space-between',
  },
  incline: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  heatingImgBox: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: cx(195),
    height: cx(195),
    marginBottom: cx(40),
  },
  allControl: {
    width: cx(66),
    height: cx(66),
    borderRadius: cx(33),
    backgroundColor: 'rgba(255,255,255,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  allControlBotton: {
    width: cx(200),
    height: cx(48),
    borderRadius: cx(24),
    backgroundColor: 'rgba(255,255,255,0.2)',
    flexDirection: 'row',
    paddingHorizontal: cx(20),
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  centerCircle: {
    width: cx(82),
    height: cx(82),
    borderRadius: cx(41),
    backgroundColor: 'rgba(255,255,255,0)',
    position: 'absolute',
  },
  textBox: {
    marginTop: cx(4),
    width: cx(86),
    justifyContent: 'center',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  flex1: {
    flex: 1,
  },
  addTouch: {
    width: cx(30),
    height: cx(30),
    justifyContent: 'center',
    alignItems: 'center',
  },
  moreImg: {
    width: cx(14),
    height: cx(14),
  },
  rightImg: {
    width: cx(5),
    height: cx(8),
    marginTop: cx(8),
    marginLeft: cx(2),
  },
  timeImg: {
    width: cx(24),
    height: cx(24),
  },
  powerImg: {
    width: cx(20),
    height: cx(22),
  },
  textinCenter: {
    fontWeight: '600',
    color: '#fff',
  },
  countdownImg: {
    width: cx(18),
    height: cx(18),
  },
  faultView: {
    width: cx(339),
    height: cx(50),
    borderRadius: cx(60),
    marginLeft: cx(18),
    position: 'absolute',
    top: cx(10),
    backgroundColor: '#fff',
    paddingHorizontal: cx(16),
    alignItems: 'center',
    flexDirection: 'row',
  },
  faultText: {
    fontSize: cx(12),
    color: '#333',
    marginLeft: cx(12),
  },
  closeViewClick: {
    width: cx(26),
    height: cx(26),
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeView: {
    position: 'absolute',
    right: cx(16),
    width: cx(26),
    height: cx(26),
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default styles;
